<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆糖，分享收集生活中的美好，遇见世界上的另外一个你。</title>
    <link rel="icon" href="../img/duitang.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/reg.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <header>
        <img id="logo" src="../img/logo.png" alt="加载失败">
        <a class="select" href="javascript:;">注册</a>|
        <a href="../html/login.html">登录</a>
        <ul>
            <li>
                <div></div>
            </li>
            <li>
                <div class="bg"></div>
                <p class="co">开启堆糖之路</p>
            </li>
            <li>
                <div></div>
            </li>
        </ul>
        <div></div>
    </header>
    <div class="box">
        <div class="top">
            <h2>亲爱的堆糖用户：</h2>
            <p>根据相关法律法规，您需要完成手机号注册才能正常使用堆糖的发布图片、文章和评论等功能哦。</p>
        </div>
        <ul class="bottom">
            <li id="tip">您的手机号码非法</li>
            <li>
                <p>输入手机号</p><input class="ipt" type="text">
            </li>
            <li>
                <p>输入密码</p><input class="ipt" type="password">
            </li>
            <li>
                <input type="checkbox">
                我已阅读并同意<a href="https://www.duitang.com/user/agreement/" target="_blank">《堆糖注册协议》</a>
                和 <a href="https://www.duitang.com/privacy/protection/" target="_blank">《用户隐私协议》</a>
            </li>
        </ul>
        <div class="reg">注册</div>
    </div>
    <script>
        class Cookie {
            set(name, value, day) {
                let str = `${name}=${value};path=/`
                if (day) {
                    let date = new Date()
                    date.setDate(date.getDate() + day)
                    str += ';expires=' + date
                }
                document.cookie = str
            }
            get(name) {
                let str = document.cookie;
                let arr = str.split('; ')
                let res; // 保存 循环过程中结束

                arr.forEach(v => {
                    let vArr = v.split('=');
                    if (vArr[0] == name) {
                        res = vArr[1];
                    }
                })
                return res
            }
            remove(name) {
                this.set(name, '0', -100)
            }
        }
        let coco = new Cookie()
        // 手机号
        let isPhone
        $('input').eq(0).change(function () {
            let str = $(this).val()
            let reg = /^1[3-9]\d{9}$/
            if (reg.test(str) && str != '') {
                have(str)
                $('#tip').css('visibility', 'hidden')
            } else {
                isPhone = false
                $('#tip').css('visibility', 'visible').text('您的手机号码非法')
            }
            ready()
        })
        // 密码
        let isPass
        $('input').eq(1).change(function () {
            let str = $(this).val()
            let reg = /^.{6,18}$/
            if (reg.test(str) && str != '') {
                isPass = true
                if (isPhone) { $('#tip').css('visibility', 'hidden') }
            } else {
                isPass = false
                $('#tip').css('visibility', 'visible').text('密码由6-18位字符组成, 区分大小写')
            }
            ready()
        })

        // 协议
        let isAgree
        $('input').eq(2).change(() => {
            isAgree = $('input').eq(2).prop('checked')
            ready()
        }

        )

        // 注册
        $('.reg').click(function () {
            if (isPhone && isPass && isAgree) {
                let regUrl = 'http://jx.xuzhixiang.top/ap/api/reg.php'
                axios.get(regUrl, {
                    params: {
                        // 防止与其他人用户名重复，加上dt_
                        username: 'dt_' + $('input').eq(0).val(),
                        password: $('input').eq(1).val()
                    }
                }).then((res) => {
                    if (res.data.code == 1) {
                        // 注册成功以后通过登录获取id
                        let loginUrl = 'http://jx.xuzhixiang.top/ap/api/login.php'
                        axios.get(loginUrl, {
                            params: {
                                username: 'dt_' + $('input').eq(0).val(),
                                password: $('input').eq(1).val()
                            }
                        }).then(function (res) {
                            let obj = res.data.data
                            // 通过id默认添加三条数据
                            for (let i = 0; i <= 2; i++) {
                                let addUrl = 'http://jx.xuzhixiang.top/ap/api/goods/goods-add.php'
                                axios.get(addUrl, {
                                    params: {
                                        pprice: i,
                                        uid: obj.id
                                    }
                                }).then(function () {
                                    if (i >= 2) {
                                        coco.set('duitang', JSON.stringify(obj), 3)
                                        // 添加完成以后跳转登录页面
                                        location.href = 'login.html'
                                    }
                                })
                            }
                        })
                    }
                })
            }
        })

        // 准备好了吗
        function ready() {
            if (isPhone && isPass && isAgree) {
                $('.reg').css({
                    'opacity': '1',
                    'cursor': 'pointer'
                })
            } else {
                $('.reg').css({
                    'opacity': '.5',
                    'cursor': 'not-allowed'
                })
            }
        }

        // 判断手机号是否存在
        function have(username) {
            let checkUrl = 'http://jx.xuzhixiang.top/ap/api/checkname.php'
            axios.get(checkUrl, {
                params: {
                    username: 'dt_' + username
                }
            }).then((res) => {
                if (res.data.code == 1) {
                    isPhone = true
                    $('#tip').css('visibility', 'hidden')
                } else {
                    isPhone = false
                    $('#tip').css('visibility', 'visible').text('手机号已被绑定，直接登录或更换后重试')
                }
                ready()
            })
        }

        // logo回到主页面
        $('#logo').click(() => location.href = 'index.html')

        // 监听加载失败的图片
        document.addEventListener("error", function (e) {

            var elem = e.target;
            if (elem.tagName.toLowerCase() == 'img') {
                elem.src = "../img/tx.jpeg";
            }
        }, true);
    </script>
</body>

</html>